<script setup lang="ts">
import { updateProfileAPI } from '@/apis/updateProfile'
import { uploadImageAPI } from '@/apis/uploadImage'
import { useUserInfoStore } from '@/store/userInfo'

const userInfoStore = useUserInfoStore()

const handleChooseAvatar = useThrottleFn(async (e: any) => {
  const url = e.detail.avatarUrl
  try {
    const res = await uploadImageAPI(url, userInfoStore.userInfo!.token!)
    if (res.data) {
      const resData = JSON.parse(res.data)
      const uploadRes = await updateProfileAPI({
        nickname: userInfoStore.userInfo?.nickname,
        avatar: resData.data.fullurl,
      }, userInfoStore.userInfo!.token!)
      if ((uploadRes.data as any).code === 1) {
        userInfoStore.setUserInfo({
          ...userInfoStore.userInfo,
          avatar: resData.data.fullurl,
        })
        uni.showToast({ title: '上传成功', icon: 'none' })
      }
      else {
        uni.showToast({ title: '上传失败，请稍后重试', icon: 'none' })
      }
    }
    else {
      uni.showToast({ title: '上传失败，请稍后重试', icon: 'none' })
    }
  }
  catch (err) {
    uni.showToast({ title: '上传失败，请稍后重试', icon: 'none' })
  }
}, 1000)

const handleSubmit = useThrottleFn(async (e: any) => {
  if (e.detail.value.nickname) {
    try {
      const res = await updateProfileAPI({
        nickname: e.detail.value.nickname,
        avatar: userInfoStore.userInfo?.avatar,
      }, userInfoStore.userInfo!.token!)
      if ((res.data as any).code === 1) {
        userInfoStore.setUserInfo({
          ...userInfoStore.userInfo,
          nickname: e.detail.value.nickname,
        })
        uni.navigateBack()
      }
      else {
        uni.showToast({ title: '昵称重复', icon: 'none' })
      }
    }
    catch (err) {
      uni.showToast({ title: '修改失败，请稍后重试', icon: 'none' })
    }
  }
  else {
    uni.showToast({ title: '请输入昵称', icon: 'none' })
  }
}, 1000)
</script>

<template>
  <view class="flex flex-col min-h-screen bg-#F8F8F8">
    <Spacer height="30" />
    <form class="bg-white rounded-10rpx" @submit="handleSubmit">
      <button
        open-type="chooseAvatar" :style="{ padding: 0, margin: 0, background: 'none' }"
        @chooseavatar="handleChooseAvatar"
      >
        <ListCell label="头像">
          <image class="w-80rpx h-80rpx my-20rpx rounded-full" :src="userInfoStore.userInfo?.avatar" />
        </ListCell>
      </button>
      <Divider color="#F0F0F0" />
      <ListCell label="昵称">
        <input name="nickname" type="nickname" class="h-116rpx bg-white rounded-10rpx text-right text-secondary text-28rpx leading-28rpx" :value="userInfoStore.userInfo?.nickname">
      </ListCell>
      <Divider color="#F0F0F0" />
      <ListCell label="手机号">
        <ListValue>{{ userInfoStore.userInfo?.mobile || '未知' }}</ListValue>
      </ListCell>
      <button name="submit" form-type="submit" class="fixed bottom-80rpx x-center flex justify-center items-center w-630rpx h-100rpx text-32rpx leading-32rpx font-bold text-white bg-brand rounded-50rpx" hover-class="bg-brand">
        确认修改
      </button>
    </form>
  </view>
</template>

<route lang="yaml">
name: 'profileSettings'
style:
  navigationBarTitleText: '个人信息'
</route>
